import React from 'react';
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import { Row, Col } from 'antd';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';

function Content1(props) {
  const { ...tagProps } = props;
  return (
    <div {...tagProps} className="home-page-wrapper content1-wrapper">
      <OverPack className="home-page content1" playScale={0.3} component={Row}>
        <TweenOne
          key="img"
          animation={{
            x: '-=30',
            opacity: 0,
            type: 'from',
            ease: 'easeOutQuad',
          }}
          resetStyle
          className="content1-img"
          component={Col}
          componentProps={{
            md: 10,
            xs: 24,
          }}
        >
          <span>
            <img src="/images/nLzbeGQLPyBJoli.png" width="100%" alt="img" />
          </span>
        </TweenOne>
        <QueueAnim
          key="text"
          type="right"
          leaveReverse
          ease={['easeOutQuad', 'easeInQuad']}
          className="content1-text"
          component={Col}
          componentProps={{
            md: 14,
            xs: 24,
          }}
        >
          <h2 key="h1" className="content1-title">企业资源管理</h2>
          <div key="p" className="content1-content">
            云资源集中编排、弹性伸缩、持续发布和部署，高可用及容灾。云资源集中编排、弹性伸缩、持续发布和部署，高可用及容灾。云资源集中编排、弹性伸缩、持续发布和部署，高可用及容灾。
          </div>
        </QueueAnim>
      </OverPack>
    </div>
  );
}

export default Content1;
